<template>
  <div class="teacherset">
    <div class="header">
      <img alt="Vue logo" src="@/assets/images/login-logo.png" />
      <div class="toright">
        <img :src="imageUrl" alt="" class="avater" />
        <span class="el-dropdown-link">
          {{ userName }}
        </span>
      </div>
    </div>
    <div class="userBox">
      <div class="user">
        <div class="userTitle">基本信息</div>
        <div class="userImg">
          <img class="imgSize" :src="imageUrl" alt="" />
          <el-upload
            action="#"
            :show-file-list="false"
            :http-request="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <button class="imgBtn">更换头像</button>
          </el-upload>
        </div>
        <div class="userMsg">
          <p>
            姓 名：
            <el-input
              class="inputSet"
              v-model="inputName"
              :disabled="true"
            ></el-input>
          </p>
          <p>
            班 级：
            <el-input
              class="inputSet"
              v-model="inputClass"
              :disabled="true"
            ></el-input>
          </p>
          <p>
            学 校：<el-input
              class="inputSet"
              v-model="inputSchool"
              :disabled="true"
            ></el-input>
          </p>
          <p>
            编 号：<el-input
              class="inputSet"
              v-model="inputID"
              :disabled="true"
            ></el-input>
          </p>
          <p>
            简 介：<el-input
              class="inputSet"
              type="textarea"
              :rows="2"
              placeholder="请简略介绍自己，字数控制在30以内"
              v-model="inputTextarea"
            ></el-input>
          </p>
        </div>
        <button class="subBtn" @click="subBtn">确定修改</button>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  width: @width;
  height: @rowheight;
  line-height: @rowheight;
  display: flex;
  padding-right: 130px;
  padding-left: 130px;
  background-color: #fff;
  border-bottom: 1px solid rgba(128, 128, 128, 0.237);
  & img {
    width: 130px;
    height: 40px;
    margin: 8px 15px 0 15px;
  }
  & a {
    padding: @pd;
    font-size: 16px;
    font-weight: bold;
  }
  & .toright {
    margin-left: auto;
    & .avater {
      position: relative;
      width: 24px;
      height: 24px;
      top: 5px;
      border-radius: 50%;
    }

    & a {
      padding-bottom: 22px;
    }
  }
}
.userBox {
  position: relative;
  height: 800px;
  background-color: #e2e2e2;
  & .user {
    position: fixed;
    left: 50%;
    top: 13%;
    transform: translate(-50%, 0);
    // margin-top: 100px;
    width: 1050px;
    height: 600px;
    background-color: #fff;
    & .userTitle {
      width: 1000px;
      height: 100px;
      line-height: 100px;
      margin: 0 auto;
      border-bottom: 1px solid #e2e2e2;
      font-size: 25px;
      color: #2a2a2a;
      font-weight: 700;
    }
    & .userImg {
      float: left;
      width: 400px;
      height: 350px;
      margin-top: 20px;
      margin-left: 25px;
      & .imgSize {
        width: 250px;
        height: 250px;
      }
      & .imgBtn {
        width: 100px;
        height: 30px;
        cursor: pointer;
        background-color: #fff;
      }
    }
    & .userMsg {
      float: right;
      width: 550px;
      height: 350px;
      margin-top: 20px;
      margin-right: 25px;
      padding-top: 0;
      & .inputSet {
        width: 75%;
      }
      & > p {
        margin-top: 20px;
        text-align: left;
        margin-left: 50px;
      }
    }
  }
  & .subBtn {
    width: 350px;
    height: 60px;
    margin-top: 30px;
    font-size: 18px;
    background-color: rgb(247, 99, 73);
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
  }
}
</style>
<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      //登录用户id
      teacherData: JSON.parse(sessionStorage.getItem("teacherData")),
      userName: "",
      imageUrl: "",
      inputName: "",
      inputClass: "",
      inputSchool: "",
      inputID: "",
      inputTextarea: "",
    };
  },
  mounted() {
    if (this.teacherData != null) {
      this.userName = this.teacherData.tname;
      this.inputName = this.teacherData.tname;
      this.inputClass = this.teacherData.class_name;
      this.inputSchool = this.teacherData.school;
      this.inputID = this.teacherData.jobId;
      this.inputTextarea = this.teacherData.description;
    }
    if (this.teacherData != null && this.teacherData.avater != null) {
      this.imageUrl = this.teacherData.avater;
    } else {
      this.imageUrl = require("../../assets/images/6.jpg");
    }
  },
  methods: {
    subBtn() {
      if (!this.imageUrl || !this.inputTextarea) {
        Toast("信息不能为空");
        return;
      }
      this.$http
        .post("http://test.com:3000/teacher/teacherMsg", {
          sid: this.teacherData.jobId,
          inputTextarea: this.inputTextarea,
          img: this.imageUrl,
        })
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            Toast(res.data.msg);
            //把username存起来（用于验证是否已登录）
            sessionStorage.setItem(
              "teacherData",
              JSON.stringify(res.data.teacher)
            );
            // console.log(res.data.user);
            setTimeout(() => {
              window.location.href = "/teacherset";
            }, 1000);
          } else {
            Toast(res.data.msg);
          }
        });
    },
    handleAvatarSuccess(res) {
      //上传
      let formData = new FormData();
      formData.append("file", res.file);
      this.$http
        .post("http://test.com:3000/teacher/teacherImg", formData)
        .then((response) => {
          if (response.data.code == "200" && response.data.url != null) {
            this.imageUrl =
              "http://test.com:3000/user/img?url=" + response.data.url;
          }
        });
    },
    beforeAvatarUpload(file) {
      if (this.teacherData == null) {
        return false;
      }
      //上传前
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>